<template>
  <div class="app-container" style="overflow: scroll">
    <el-form ref="submitParams" :model="submitParams" :rules="rules" label-width="120px">
      <el-row type="flex">
        <el-col :offset="6" :span="9">
          <el-form-item label="发起参与机构" prop="sender">
            <el-input v-model="submitParams.sender" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :offset="6" :span="9">
          <el-form-item label="发起参与机构名" prop="senderName">
            <el-input v-model="submitParams.senderName" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :offset="6" :span="9">
          <el-form-item label="接收参与机构" prop="recver">
            <el-input v-model="submitParams.recver" @change="checkbankcode('recver')" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="20px">
            <el-button icon="el-icon-search" plain type="primary" @click="openBankBranchDialog('recver')">
              请选择
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :offset="6" :span="9">
          <el-form-item label="接收参与机构名称" prop="recverName">
            <el-input v-model="submitParams.recverName" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :offset="6" :span="9">
          <el-form-item label="扣款管理类型" prop="dbtMngType">
            <el-select
              style="width: 100%"
              v-model="submitParams.dbtMngType"
              placeholder="扣款管理类型"
              :disabled="false"
            >
              <el-option
                v-for="dict in dictMap.DebitManagementTypeCode"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :offset="6" :span="9">
          <el-form-item label="扣款通知编号" prop="dbtNo">
            <el-input v-model="submitParams.dbtNo" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :offset="6" :span="9">
          <el-form-item label="地域标识" prop="regionId">
            <el-select style="width: 100%" v-model="submitParams.regionId" placeholder="地域标识">
              <el-option
                v-for="dict in dictMap.RegionId"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :offset="6" :span="9">
          <el-form-item label="统一社会信用代码" prop="uniformScCode">
            <el-input v-model="submitParams.uniformScCode" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :offset="6" :span="9">
          <el-form-item label="付款人数目" prop="payerNum">
            <el-input v-model="submitParams.payerNum" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <ht-table
          ref="dataTable"
          :multi-select="false"
          :showSerialNumber="false"
          :dictMap="dictMap"
          :tableBindColumns="tableBindColumns"
          :opButtonList="opButtonList"
          :showRightToolbar="false"
          :showPagination="false"
        >
          <template v-slot:operate>
            <el-table-column label="操作" align="left" width="100" fixed="right">
              <template slot-scope="scope">
                <ht-button-group
                  :buttonList="[
                    {
                      label: '维护',
                      doFunc: () => {
                        editRow(scope.$index, scope.row);
                      },
                    },
                    {
                      label: '删除',
                      doFunc: () => {
                        deleteRow(scope.$index, scope.row);
                      },
                    },
                  ]"
                />
              </template>
            </el-table-column>
          </template>
        </ht-table>
      </el-row>

      <el-row>
        <el-col :offset="6" :span="12">
          <el-form-item>
            <el-button type="primary" @click="submitForm" :disabled="formdisable" v-loading.fullscreen.lock="loading">
              提 交
            </el-button>
            <el-button @click="refresh">重 置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-dialog
      :close-on-click-modal="false"
      @close="cancel"
      :title="title"
      center
      :visible.sync="open"
      v-if="open"
      append-to-body
      width="1024px"
    >
      <el-form ref="detailForm" :model="detailForm" :rules="detailRulues" label-width="140px">
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="扣款明细标识号" prop="dbtDtlId">
              <el-input v-model="detailForm.dbtDtlId" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="付款人名称" prop="payerName">
              <el-input type="textarea" v-model="detailForm.payerName" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="付款人地址" prop="payerAddr">
              <el-input type="textarea" v-model="detailForm.payerAddr" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="付款人账号" prop="payerActno">
              <el-input v-model="detailForm.payerActno" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="10">
            <div class="grid-payer">
              <el-form-item label="付款人开户行行号" prop="payerAccBrno">
                <el-input
                  v-model="detailForm.payerAccBrno"
                  placeholder="付款人开户行行号"
                  @change="checkbankcode('detailFormPayerAccBrno')"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-payer">
              <el-button
                type="primary"
                icon="el-icon-search"
                plain
                @click="openBankBranchDialog('detailFormPayerAccBrno')"
              >
                行号查找
              </el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款人开户行行名" prop="payerAccName">
              <el-input v-model="detailForm.payerAccName" placeholder="付款人开户行行名" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="10">
            <div class="grid-payer">
              <el-form-item label="付款行行号" prop="payerBrno">
                <el-input
                  v-model="detailForm.payerBrno"
                  placeholder="付款行行号"
                  @change="checkbankcode('detailFormPayerBrno')"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-payer">
              <el-button
                type="primary"
                icon="el-icon-search"
                plain
                @click="openBankBranchDialog('detailFormPayerBrno')"
              >
                行号查找
              </el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款行行名" prop="payerBrname">
              <el-input v-model="detailForm.payerBrname" placeholder="付款行行名" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="币种" prop="curcd">
              <el-input v-model="detailForm.curcd" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金额" prop="amount">
              <ht-amount-input v-model="detailForm.amount" placeholder="金额"></ht-amount-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" align="center" class="dialog-footer">
        <el-button type="primary" @click="detailSave(detailForm.index)">保 存</el-button>
        <el-button type="primary" @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>

    <bank-branch-dialog ref="bankBranchDialog" @confirm="confirmBankBranch"></bank-branch-dialog>
  </div>
</template>

<script>
import { listPageMixin } from "@/libs/listPageMixin";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import { getBankInfByBankCode } from "@/api/cnaps/common/bankInfo";
import { checkRcvStBrnoStatus } from "@/api/cnaps/common/check";
import { amountThousandsFormatter } from "@/utils/table_col_formatter";
import HtAmountInput from "@/views/components/HtAmountInput";
import { custAccDeductionEntrySave } from "@/api/cnaps/beps/371";
import { mapGetters } from "vuex";
export default {
  name: "CustAccDeductionEntry",
  mixins: [listPageMixin],
  components: { BankBranchDialog, HtAmountInput },
  computed: { ...mapGetters(["globalBusData"]) },
  created() {
    this.$set(this.submitParams, "sender", this.globalBusData.cnapsBrno);
    this.$set(this.submitParams, "senderName", this.globalBusData.cnapsBrname);
  },
  watch: {
    globalBusData: {
      handler(val) {
        this.$set(this.submitParams, "sender", val.cnapsBrno);
        this.$set(this.submitParams, "senderName", val.cnapsBrname);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      sysCodeList: [],
      msgTypeList: [],
      bizTypeList: [],

      visibleHiden: "none",

      type:"",
      loading: false,

      // 录入参数
      submitParams: {
        sender: undefined,
        senderName: undefined,
        recver: undefined,
        recverName: undefined,
        dbtMngType: "DM02",
        dbtNo: undefined,
        regionId: undefined,
        uniformScCode: undefined,
        payerNum: 0,
        tableList: [],
      },
      opButtonList: () => {
        return [
          {
            label: `${this.lang("common.add")}`,
            type: "primary",
            icon: "el-icon-plus",
            clickFun: () => {
              this.add();
            },
          },
        ];
      },

      open: false,
      title: "",
      detailForm: {
        dbtDtlId: undefined,
        payerName: undefined,
        payerAddr: undefined,
        payerActno: undefined,
        payerAccBrno: undefined,
        payerAccName: undefined,
        payerBrno: undefined,
        payerBrname: undefined,
        curcd: "CNY",
        amount: 0,
        index: "",
      },

      tableBindColumns: [
        { prop: "dbtDtlId", label: "扣款明细标识号", width: 180 },
        { prop: "payerName", label: "付款人名称", width: 180 },
        { prop: "payerAddr", label: "付款人地址", width: 180 },
        { prop: "payerActno", label: "付款人账号", width: 180 },
        { prop: "payerAccBrno", label: "付款人开户行行号", width: 180 },
        { prop: "payerAccName", label: "付款人开户行行名", width: 180 },
        { prop: "payerBrno", label: "付款行行号", width: 180 },
        { prop: "payerBrname", label: "付款行行名", width: 180 },
        { prop: "curcd", label: "币种", width: 180 },
        { prop: "amount", label: "金额", type: "price", width: 180 },
      ],
      //
      searchFormDictList: ["RegionId", "DebitManagementTypeCode"],

      formdisable: false,

      rules: {
        sender: [{ max: 14, message: "最大长度为14位", trigger: "blur" }],
        senderName: [{ max: 60, message: "最大长度为60位", trigger: "blur" }],
        recver: [
          { max: 14, message: "最大长度为14位：", trigger: ['blur', 'change'] },
          { required: true, message: "请输入接收参与机构号", trigger: "blur" },
        ],
        recverName: [
          { required: true, message: "接收参与机构名称", trigger: "blur" },
          { max: 60, message: "最大长度为60位：", trigger: "blur" },
        ],
        dbtMngType: [{ required: true, message: "请输入接收参与机构号", trigger: "blur" }],
        dbtNo: [{ required: true, message: "请输入扣款通知编号", trigger: "blur" }],
        regionId: [{ required: true, message: "请输入地域标识", trigger: "blur" }],
        uniformScCode: [{ required: true, message: "请输入统一社会信用代码", trigger: "blur" }],
        payerNum: [{ required: true, message: "请输入付款人数目", trigger: "blur" }],
      },
      detailRulues: {
        dbtDtlId: [{ required: true, message: "请输入扣款明细标识号", trigger: "blur" }],
        payerName: [{ required: true, message: "请输入付款人名称", trigger: "blur" }],
        payerActno: [{ required: true, message: "请输入付款人账号", trigger: "blur" }],
        payerAccBrno: [{ required: true, message: "请输入付款人开户行行号", trigger: ['blur', 'change'] }],
        payerAccName: [
          { required: true, message: "请输入付款人开户行行名", trigger: "blur" },
          { max: 60, message: "最大长度为60位", trigger: "blur" },
        ],
        payerBrno: [{ required: true, message: "请输入付款行行号", trigger: ['blur', 'change'] }],
        payerBrname: [
          { required: true, message: "请输入付款行行名", trigger: "blur" },
          { max: 60, message: "最大长度为60位", trigger: "blur" },
        ],
        amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
      },
    };
  },
  mounted() {},
  methods: {
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          this.submitParams.tableList = this.$refs.dataTable.dataList;
          this.loading = true;
          custAccDeductionEntrySave(this.submitParams)
            .then((res) => {
              this.msgSuccess("提交成功");
              this.refresh();
              this.loading = false;
              this.$alert(`CORE_ID: ${res.result.rspId}`, "生成交易流水号", {
                confirmButtonText: "确定",
                callback: (action) => {
                },
              });
            })
            .catch((err) => {
              this.loading = false;
            });
        }
      });
    },
    //点击重置按钮
    refresh() {
      this.$refs.dataTable.dataList = [];
      this.resetForm("submitParams");
    },

    add() {
      this.detailForm = {
        dbtDtlId: undefined,
        payerName: undefined,
        payerAddr: undefined,
        payerActno: undefined,
        payerAccBrno: undefined,
        payerAccName: undefined,
        payerBrno: undefined,
        payerBrname: undefined,
        curcd: "CNY",
        amount: 0,
        index: "",
      };
      this.open = true;
      this.title = "扣款明细新增";
      this.type = "add";
    },

    // 删除行
    deleteRow(index, row) {
      this.$confirm("确定删除该条信息吗？")
        .then((_) => {
          this.$refs.dataTable.dataList.splice(index, 1);
          this.$set(this.submitParams, "payerNum", this.$refs.dataTable.dataList.length);
        })
        .catch((_) => {});
    },
    // 维护行
    editRow(index, row) {
      this.open = true;
      this.$set(this, "detailForm", row)
      this.$set(this.detailForm,"index",index);
      this.title = "扣款明细维护";
      this.type = "edit"
    },

    //行名行号返回
    confirmBankBranch(fromFlag, row) {
      if (fromFlag === "recver") {
        this.$set(this.submitParams, "recver", row.bankCode);
        this.$set(this.submitParams, "recverName", row.orgFullname);
      } else if (fromFlag === "detailFormPayerAccBrno") {
        this.$set(this.detailForm, "payerAccBrno", row.bankCode);
        this.$set(this.detailForm, "payerAccName", row.orgFullname);
      } else if (fromFlag === "detailFormPayerBrno") {
        this.$set(this.detailForm, "payerBrno", row.bankCode);
        this.$set(this.detailForm, "payerBrname", row.orgFullname);
      }
    },
    //行名行号查询
    openBankBranchDialog(fromFlag = "") {
      this.$refs.bankBranchDialog.show(fromFlag);
    },

    checkbankcode(fromFlag) {
      console.log(fromFlag);
      if (fromFlag === "recver") {
        let recver = this.submitParams.recver;

        getBankInfByBankCode(recver)
          .then((response) => {
            if (response.code == "S" && response.result !== null && response.result !== undefined) {
              this.$set(this.submitParams, "recver", response.result.bankCode);
              this.$set(this.submitParams, "recverName", response.result.orgFullname);
            } else {
              this.msgError("无行名行号记录");
              this.$set(this.submitParams, "recver", null);
              this.$set(this.submitParams, "recverName", null);
            }
          })
          .catch((err) => {
            this.$set(this.submitParams, "recver", null);
            this.$set(this.submitParams, "recverName", null);
          });
      } else if (fromFlag === "detailFormPayerAccBrno") {
        let payerAccBrno = this.detailForm.payerAccBrno;
        getBankInfByBankCode(payerAccBrno)
          .then((response) => {
            if (response.code == "S" && response.result !== null && response.result !== undefined) {
              this.$set(this.detailForm, "payerAccBrno", response.result.bankCode);
              this.$set(this.detailForm, "payerAccName", response.result.orgFullname);
            } else {
              this.msgError("无行名行号记录");
              this.$set(this.detailForm, "payerAccBrno", null);
              this.$set(this.detailForm, "payerAccName", null);
            }
          })
          .catch((err) => {
            this.$set(this.detailForm, "payerAccBrno", null);
            this.$set(this.detailForm, "payerAccName", null);
          });
      } else if (fromFlag === "detailFormPayerBrno") {
        let payerBrno = this.detailForm.payerBrno;
        getBankInfByBankCode(payerBrno)
          .then((response) => {
            if (response.code == "S" && response.result !== null && response.result !== undefined) {
              this.$set(this.detailForm, "payerBrno", response.result.bankCode);
              this.$set(this.detailForm, "payerBrname", response.result.orgFullname);
            } else {
              this.msgError("无行名行号记录");
              this.$set(this.detailForm, "payerBrno", null);
              this.$set(this.detailForm, "payerBrname", null);
            }
          })
          .catch((err) => {
            this.$set(this.detailForm, "payerBrno", null);
            this.$set(this.detailForm, "payerBrname", null);
          });
      }
    },
    cancel() {
      this.resetForm("detailForm");
      this.open = false;
    },

    detailSave(index) {
      if (this.type === "edit") {
        this.$refs["detailForm"].validate((valid) => {
          if (valid) {
            this.$refs.dataTable.dataList[index].dbtDtlId = this.detailForm.dbtDtlId;
            this.$refs.dataTable.dataList[index].payerName = this.detailForm.payerName;
            this.$refs.dataTable.dataList[index].payerAddr = this.detailForm.payerAddr;
            this.$refs.dataTable.dataList[index].payerActno = this.detailForm.payerActno;
            this.$refs.dataTable.dataList[index].payerAccBrno = this.detailForm.payerAccBrno;
            this.$refs.dataTable.dataList[index].payerAccName = this.detailForm.payerAccName;
            this.$refs.dataTable.dataList[index].payerBrno = this.detailForm.payerBrno;
            this.$refs.dataTable.dataList[index].payerBrname = this.detailForm.payerBrname;
            this.$refs.dataTable.dataList[index].curcd = this.detailForm.curcd;
            this.$refs.dataTable.dataList[index].amount = this.detailForm.amount;
            this.$refs.dataTable.initColPer(this.$refs.dataTable.dataList);
            this.$set(this.submitParams, "payerNum", this.$refs.dataTable.dataList.length);
            this.open = false;
          }
        });
      } else {
        this.$refs["detailForm"].validate((valid) => {
          if (valid) {
            this.$refs.dataTable.dataList.push(this.detailForm);
            this.$set(this.submitParams, "payerNum", this.$refs.dataTable.dataList.length);
            this.open = false;
          }
        });
      }
    },
  },
};
</script>
